<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商家页面 - 新商城</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
    <header class="bg-white shadow-md">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="text-2xl font-bold text-blue-600">新商城</div>
            <div>
                <a href="user-home.html" class="text-gray-700 hover:text-blue-600">返回首页</a>
            </div>
        </div>
    </header>

    <main class="container mx-auto px-4 py-8">
        <!-- 商家信息 -->
        <div class="bg-white rounded-lg shadow-md p-6 mb-8">
            <h2 class="text-2xl font-bold mb-4" id="shopName"></h2>
            <div class="grid md:grid-cols-2 gap-4">
                <div>
                    <p class="text-gray-600 mb-2"><i class="fa fa-map-marker text-gray-400 mr-2"></i>地址: <span id="shopAddress"></span></p>
                    <p class="text-gray-600 mb-2"><i class="fa fa-phone text-gray-400 mr-2"></i>电话: <span id="shopPhone"></span></p>
                    <p class="text-gray-600 mb-2"><i class="fa fa-user text-gray-400 mr-2"></i>联系人: <span id="contactPerson"></span></p>
                </div>
                <div>
                    <h3 class="font-semibold mb-2">店铺描述</h3>
                    <p class="text-gray-600" id="shopDesc"></p>
                </div>
            </div>
        </div>

        <!-- 商家商品列表 -->
        <div class="bg-white rounded-lg shadow-md p-6">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-xl font-bold">商家商品</h2>
            </div>
            
            <div id="goodsList" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- 商品将通过JavaScript动态加载 -->
            </div>
        </div>
    </main>

    <footer class="bg-gray-800 text-white py-8 mt-16">
        <div class="container mx-auto px-4 text-center">
            <p>© 2025 新商城 版权所有</p>
        </div>
    </footer>

    <script>
        // 获取URL中的商家ID
        function getMerchantIdFromUrl() {
            const params = new URLSearchParams(window.location.search);
            return params.get('merchantId');
        }

        // 页面加载完成后初始化
        window.addEventListener('DOMContentLoaded', async () => {
            const merchantId = getMerchantIdFromUrl();
            if (!merchantId) {
                alert('无效的商家信息');
                window.location.href = 'user-home.html';
                return;
            }

            // 加载商家信息
            await loadMerchantInfo(merchantId);
            // 加载商家商品
            await loadMerchantGoods(merchantId);
        });

        // 加载商家信息
        async function loadMerchantInfo(merchantId) {
            try {
                const response = await fetch(`http://localhost:8080/api/merchant/info?id=${merchantId}`);
                const result = await response.json();
                
                if (result.success && result.data) {
                    const merchant = result.data;
                    document.getElementById('shopName').textContent = merchant.shopname || '未知店铺';
                    document.getElementById('shopAddress').textContent = merchant.address || '未填写';
                    document.getElementById('shopPhone').textContent = merchant.phone || '未填写';
                    document.getElementById('contactPerson').textContent = merchant.contact_person || '未填写';
                    document.getElementById('shopDesc').textContent = merchant.shop_desc || '暂无描述';
                } else {
                    alert('获取商家信息失败: ' + (result.message || '未知错误'));
                }
            } catch (error) {
                console.error('加载商家信息失败:', error);
                alert('加载商家信息失败，请稍后重试');
            }
        }

        // 加载商家商品
        async function loadMerchantGoods(merchantId) {
            try {
                const response = await fetch('http://localhost:8080/api/goods/merchant/owned', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ id: merchantId })
                });
                
                const result = await response.json();
                
                if (result.success && result.data) {
                    const goodsListElement = document.getElementById('goodsList');
                    goodsListElement.innerHTML = '';
                    
                    if (result.data.length === 0) {
                        goodsListElement.innerHTML = '<div class="col-span-full text-center py-8 text-gray-500">该商家暂无上架商品</div>';
                        return;
                    }
                    
                    result.data.forEach(good => {
                        const goodCard = document.createElement('div');
                        goodCard.className = 'border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition';
                        goodCard.innerHTML = `
                            <div class="p-4">
                                <h3 class="font-bold text-lg mb-2">${good.goodname}</h3>
                                <p class="text-gray-600 text-sm mb-2">${good.good_desc || '无描述'}</p>
                                <p class="text-red-600 font-bold mb-4">¥${(good.price / 100).toFixed(2)}</p>
                                <button class="buy-btn w-full py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition" 
                                        data-goodid="${good.goodid}">
                                    立即购买
                                </button>
                            </div>
                        `;
                        goodsListElement.appendChild(goodCard);
                    });
                    
                    // 绑定购买按钮事件
                    document.querySelectorAll('.buy-btn').forEach(btn => {
                        btn.addEventListener('click', () => {
                            const goodId = btn.getAttribute('data-goodid');
                            const good = result.data.find(g => g.goodid == goodId);
                            // 这里可以复用user-home.html中的购买逻辑
                            alert(`准备购买商品: ${good.goodname}`);
                            // 实际项目中应该打开购买模态框
                        });
                    });
                }
            } catch (error) {
                console.error('加载商家商品失败:', error);
                alert('加载商家商品失败，请稍后重试');
            }
        }
    </script>
</body>
</html>